<template>
	<view>
		<view class="container-view">
			<view class="list-view">
				<uni-swipe-action>
					<uni-swipe-action-item v-for="item in list">
						<template>
							<view class="item">
								<view class="top">
									<view class="name">{{item.patientName}}</view>
									<view class="phone">{{item.contactPhone}}</view>
									<image src="../../static/mine_patient_modify.png" @click="navToEditPatient(item)">
									</image>
								</view>
								<view class="bottom">
									<view style="display: flex;flex-direction: column;">
										<view>{{item.serviceAddress}}</view>
										<view>{{item.detailedAddress}}</view>
									</view>
									<view v-if="item.defaultVisitor==='是'" style="color: #f00;">默认就诊人</view>
									<view v-else @click="updateDefaultVisitor(item)"
										style="width: 30rpx;height: 30rpx;border-radius: 15rpx;border: 6rpx solid #f00;">
									</view>
								</view>
							</view>
						</template>
						<template v-slot:right>
							<view class="del-btn-view" @click="delItem(item)">
								<image src="../../static/shop_icon_delete.png" class="del-btn"></image>
							</view>
						</template>
					</uni-swipe-action-item>
				</uni-swipe-action>

				<uni-load-more :status="status"></uni-load-more>
			</view>


			<!-- 			<view class="list-view">
				<view class="item" v-for="item in list">
					<view class="top">
						<view class="name">{{item.contactPerson}}</view>
						<view class="phone">{{item.contactPhone}}</view>
						<image src="../../static/mine_patient_modify.png" @click="navToEditPatient(item)"></image>
					</view>
					<view class="bottom">{{item.serviceAddress}}</view>
				</view>
				<uni-load-more :status="status"></uni-load-more>
			</view> -->

			<view class="bottom-fixed-view">
				<view class="btn" @click="navToNewPatient">新增就诊人</view>
			</view>
		</view>
	</view>
</template>

<script>
	import PageInfo from '../../utils/pageutils'
	import * as patientContact from '../../common/api/patientContact.js'
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				pageInfo: new PageInfo(),
				list: [],
				status: 'more',
			}
		},
		computed: {
			...mapGetters({
				pageResInfo: "page/pageInfo",
			}),
		},
		onLoad() {
			this.refresh()
		},
		onPullDownRefresh() {
			this.refresh()
		},
		onReachBottom() {
			this.loadMore()
		},
		onShow() {
			if (this.pageResInfo?.isAddPatientInfo) {
				this.refresh()
				this.$nextTick(() => {
					this.$store.commit("page/setPageInfo", {});
				});
			}
			if (this.pageResInfo?.isUpdatePatientInfo) {
				this.refresh()
				this.$nextTick(() => {
					this.$store.commit("page/setPageInfo", {});
				});
			}
		},
		methods: {
			refresh() {
				this.pageInfo.reset()
				this.list = []
				this.status = 'loading'
				this.getList()
			},
			loadMore() {
				if (this.pageInfo.isNotLoadAll) {
					this.status = 'loading'
					this.pageInfo.nextPage()
					this.getList()
				} else {
					this.status = 'noMore'
				}
			},
			getList() {
				const param = {
					pageIndex: this.pageInfo.pageIndex,
					pageSize: this.pageInfo.pageSize,
					wxOpenid: uni.getStorageSync('openid_key')
				}
				patientContact.queryByPage(param).then(result => {
					const list = result.data.data.rows || []
					const total = result.data.data.total
					this.list = [...this.list, ...list]
					this.pageInfo.total = total
					this.pageInfo.loadedTotal = this.list.length
					setTimeout(() => {
						if (this.pageInfo.isNotLoadAll) {
							this.status = 'more'
						} else {
							this.status = 'noMore'
						}
						uni.stopPullDownRefresh()
					}, 200)
				}).catch(error => {
					console.log(error);
				})
			},
			navToNewPatient() {
				uni.navigateTo({
					url: '/patientAppPages/pages/newPatient/newPatient'
				})
			},
			navToEditPatient(item) {
				uni.navigateTo({
					url: '/patientAppPages/pages/newPatient/newPatient?uid=' + item.uid
				})
			},
			delItem(item) {
				uni.showModal({
					title: '提示',
					content: '确认删除该条数据?',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							const param = {
								uid: item.uid
							}
							patientContact.deleteById(param).then(result => {
								uni.showToast({
									title: result.data.msg
								})
								this.refresh()
							}).catch(error => {
								console.log(error);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			updateDefaultVisitor(item) {
				const param = {
					uid: item.uid,
					wxOpenid: uni.getStorageSync('openid_key')
				}
				patientContact.updateDefaultVisitor(param).then(result => {
					uni.showToast({
						title: '设置成功！'
					})
					this.refresh()
				}).catch(error => {
					console.log(error);
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	page {
		background: #F9F9F9;
	}

	.container-view {
		display: flex;
		flex-direction: column;
	}

	.list-view {
		margin-bottom: 160rpx;
	}

	.item {
		margin-left: 20rpx;
		margin-right: 20rpx;
		background: white;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;

		.top {
			display: flex;
			align-items: center;
			color: #232323;
			font-size: 30rpx;
			font-weight: bold;

			.name {}

			.phone {
				flex: 1;
				margin-left: 28rpx;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			color: rgba(35, 35, 35, 0.5);
			font-size: 24rpx;
			margin-top: 30rpx;
		}

	}

	.bottom-fixed-view {
		width: 100%;
		position: fixed;
		bottom: 0;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #F9F9F9;

		.btn {
			height: 88rpx;
			width: 100%;
			background: #0BC5AE;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 48rpx;
			margin: 24rpx 0;
		}
	}

	.del-btn-view {
		width: 200rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.del-btn {
			width: 50rpx;
			height: 50rpx;
		}
	}
</style>